<template>
	<u-form :model="form" ref="uFormRef" :label-width='labelWidth' :border-bottom="true" :label-align="labelAlign"
		:error-type="['message', 'border-bottom','border']">
		<u-form-item v-for="(item,index) in formList" :key="index" :label="item.label+':'" :prop="item.prop"
			:border-bottom="true" :required="!!item.Required">
			<template v-if="item.ControlType === 'datebox'">
				<u-input v-model="form[item.prop]" type='select' @click="openSelect(item)" :height="inputHeight"
					:placeholder="item.placeholder||'选择日期'" :border="inputBorder" :disabled="!!item.disabled" />
				<u-picker mode="time" v-model="item.show" :default-time="nowDate"
					@confirm="confirm($event,item,'date')"></u-picker>
			</template>
			<template v-else-if="item.ControlType === 'combobox'">
				<u-input v-model="form[item.prop+'label']" type='select' @click="openSelect(item)" :height="inputHeight"
					:placeholder="item.placeholder||'请选择'" :border="inputBorder" :disabled="!!item.disabled" />
				<u-select v-model="item.show" :list="item.items" @confirm="confirm($event,item,'select')"></u-select>
			</template>
			<!-- 连级选择 -->
			<template v-else-if="item.ControlType === 'mutilCombobox'">
				<u-input v-model="form[item.prop+'label']" type='select' @click="openSelect(item)" :height="inputHeight"
					:placeholder="item.placeholder||'请选择'" :border="inputBorder" :disabled="!!item.disabled" />
				<u-select v-model="item.show" mode="mutil-column-auto" :list="item.items"
					@confirm="confirm($event,item,'mutilSelect')"></u-select>
			</template>
			<!-- 多选 -->
			<template v-else-if="item.ControlType === 'comboboxMultiple'">
				<!-- 多选绑定数据格式是value数组，保存数据前处理数据格式 -->
				<!-- <next-data-select  :filterable="true" :multiple="true" :options="item.items"
					v-model="form[item.prop]" /> -->
				<zxz-uni-data-select v-model="form[item.prop]" :multiple="true" :filterable="false"
					:localdata="item.items"></zxz-uni-data-select>
			</template>
			<template v-else-if="item.ControlType==='upload'">
				<u-upload ref="uUploadRef" :action="uploadDatas.action" :auto-upload="!!uploadDatas.autoUpload"
					width="100px" :form-data="uploadDatas.formData" height="100px" @on-list-change="fileChange"
					name='file' :max-count="5" @on-uploaded="onUploaded">
				</u-upload>
			</template>
			<u-input v-else-if="item.ControlType==='textarea'" v-model="form[item.prop]" :border="inputBorder"
				:disabled="!!item.disabled" :height="inputHeight" :placeholder="item.placeholder||'请输入'"
				type='textarea' />
			<u-input v-else-if="item.ControlType==='numberbox'" v-model="form[item.prop]" :border="inputBorder"
				:disabled="!!item.disabled" :height="inputHeight" :placeholder="item.placeholder||'请输入'"
				type='number' />
			<u-input v-else v-model="form[item.prop]" :border="inputBorder" :disabled="!!item.disabled"
				:height="inputHeight" :placeholder="item.placeholder||'请输入'" />
		</u-form-item>
	</u-form>
</template>

<script>
	/*
	 * 表单封装
	 * @labelWidth '200' 
	 * @form {} 
	 * @formList []
	 * @rules {}
	 * 选择配置了 日期选择、数据选择
	 * 添加了文件上传： 
	 * 文件上传配置对象：uploadDatas:{action:'上传地址',autoUpload:'自动上传',formData:'上传其他参数'}
	 * 文件切换触发：fileChange 文件上传完成触发：onUploaded
	 */
	export default {
		props: {
			labelWidth: {
				default: 'auto'
			},
			labelAlign: {
				default: 'right'
			},
			form: {
				type: Object,
				default: function() {
					return {}
				}
			},
			formList: {
				type: Array,
				default: function() {
					return []
				},
			},
			rules: {
				type: Object,
				default: function() {
					return {}
				}
			},
			inputBorder: {
				default: true
			},
			inputHeight: {
				default: '80'
			},
			isSmall: {
				default: true
			},
			// 连级选择 选择变化后是否默认配置
			mutilSelectDefault: {
				default: true
			}

		},
		data() {
			return {
				nowDate: this.$u.timeFormat(new Date, 'yyyy-mm-dd')
			}
		},
		methods: {
			openSelect(col) {
				this.$set(col, 'show', true)
			},
			confirm(e, col, type) {
				const prop = col.prop
				let selectData
				// 选择日期
				if (type === 'date') {
					selectData = e.year + '-' + e.month + '-' + e.day
				}
				// 下拉选择，配置prop+label作为显示，value配置给对应的prop
				if (type === 'select') {
					selectData = e[0].value
					// 显示label
					this.$set(this.form, prop + 'label', e[0].label)
				}
				// 连级选择
				if (type === 'mutilSelect') {
					if (this.mutilSelectDefault) col.items.forEach(val => {
						if (val.value === e[0].value) {
							this.$set(this.form, val.value, e[1].value)
						} else {
							this.$set(this.form, val.value, null)
						}
						this.$set(this.form, prop + 'label', e[0].label + '/' + (e[1].label || ''))
					})
					else this.$emit('mutilSelect', e, col)
				}
				// 多选 
				if (type === 'comboboxMultiple') {
					console.log('e', e)

				}
				this.$set(this.form, prop, selectData)
			},
			// 上传文件切换
			fileChange(lists) {
				this.$emit('fileChange', lists)
			},
			// 所有文件上传完成
			onUploaded() {
				this.$emit('onUploaded')
			}
		}
	}
</script>

<style scoped lang="scss">
	.u-form-item {
		padding: 0 0 10rpx 0 !important;
		line-height: 100% !important;
	}

	.uni-input-input {
		font-size: small !important;
	}

	.uni-input-placeholder {
		font-size: small !important;
	}

	::v-deep .u-input__input {
		font-size: small !important;
	}

	::v-deep .u-form-item--left__content__label {
		font-weight: bold;
	}
</style>